<template>
	<view class="fn_contents display  width_699 displayColumn displaycenter_jus">
		<view class="fn_contents_top displaycenter_aliem display  width-100 ">
			<view class="left display  displaycenter_aliem">
				<span class="fontSize font_comm M-L24" >邀请佣金</span>
				
				<span class="fontSize font_comm" v-if="flag==0||flag==1||flag==4">+</span>
				<span class="fontSize font_comm" v-if="flag==0||flag==1||flag==4">16</span>
				<!-- 审核中和成功 -->
				<span class="fontSize font_comm" style="color: #FF672D;" v-if="flag==2||flag==3">-</span>
				<span class="fontSize font_comm" style="color: #FF672D;" v-if="flag==2||flag==3">16</span>
				
			</view>
			<view class="right display ">
				<view :class="{right_one:flag==0,right_one1:flag==1,right_one2:flag==2,right_one3:flag==3,right_one4:flag==4, display:true,all_item:true,'M-R24':true}">
					<span class="fontSize font_comm " v-if="flag==0">待结算</span>
					<span class="fontSize font_comm" v-if="flag==1">已到账</span>
					<span class="fontSize font_comm" v-if="flag==2">审核中</span>
					<span class="fontSize font_comm" v-if="flag==3">成功</span>
					<span class="fontSize font_comm" v-if="flag==4">失败</span>
				</view>
			</view>
		</view>
		<view class="fn_contents_bottom display  width-100 M-T8">
			<span class="fontSize font_comm M-L24">订单号：1232131231231</span>
			<span class="fontSize font_comm M-R24">2024-5-9  17:52:01</span>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				flag:0,//0 待结算 1 已到账 2 审核中 3成功 4失败
			}
		},
		methods:{
			
		}
	}
</script>

<style scoped lang="scss">
	.fn_contents{
		width: 690rpx;
		height: 130rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.fn_contents_top{
		justify-content: space-between;
		.left{
			:nth-child(1){
				font-weight: 600;
				font-size: 28rpx;
				color: #000000;
			}
			:nth-child(2){
				font-weight: 600;
				font-size: 28rpx;
				color: #126BC9;
			}
			:nth-child(3){
				font-weight: 600;
				font-size: 28rpx;
				color: #126BC9;
			}
		}
		// 待结算
		.right_one{
			width: 88rpx;
			height: 40rpx;
			background: rgba(255,103,45,0.1);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			span{
				font-weight: 600;
				font-size: 20rpx;
				color: #FF672D;
			}
		}
		// 已到账
		.right_one1{
			width: 88rpx;
			height: 40rpx;
			background: rgba(0,220,169,0.1);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			span{
				font-weight: 600;
				font-size: 20rpx;
				color: #00DCA9;
			}
		}
		// 审核中
		.right_one2{
			width: 88rpx;
			height: 40rpx;
			background: rgba(255,153,1,0.1);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			span{
				font-weight: 600;
				font-size: 20rpx;
				color: #FF9901;
			}
		}
		// 成功
		.right_one3{
			width: 88rpx;
			height: 40rpx;
			background: rgba(18,107,201,0.1);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			span{
				font-weight: 600;
				font-size: 20rpx;
				color: #126BC9;
			}
		}
		// 失败
		.right_one4{
			width: 88rpx;
			height: 40rpx;
			background: rgba(232,41,41,0.1);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			span{
				font-weight: 600;
				font-size: 20rpx;
				color: #E82929;
			}
		}
	}
	.fn_contents_bottom{
		justify-content: space-between;
		span{
			font-weight: 400;
			font-size: 24rpx;
			color: #72778A;
		}
	}
</style>